import React, { Component } from "react";

class App extends Component {
  state = {
    count: 5,
    name: "zhangsan",
  };

  handleClick = () => {
    // console.log(this);
    //todo 直接修改是没有响应式的
    //todo 改变数据需要使用setState方法

    //! 如果改变后的值需要依赖上一次的值，最好用函数，更加安全
    //! 如果改变后的值不需要依赖上一次的值，最好用对象，更加方便
    //todo 可以接收第一个参数是对象，第二个参数是回调函数，在改变结束以后调用
    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        console.log(this.state.count);
      }
    );

    // this.state.count++
    // this.state.count = this.state.count + 1

    //todo setState是可以接收一个函数, 第二个参数是回调函数
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count++,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
  };

  render() {
    return (
      <>
        <h2>setState</h2>
        <p>{this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
        <p>{this.state.name}</p>
      </>
    );
  }
}

export default App;
